<template>
    <!--头部-->
    <div class="article-info">
        <!-- 视频类型 -->
        <!--<div v-if="detail.type == '3' || detail.type == '4' && detail.videoLink!= undefined" class="mediaCover">
            <div class="videoCover">
                <video-player :video="video"></video-player>
            </div>
        </div>-->
        <z-history></z-history>
        <img class="image" :src="picHead+detail.poster">
        <div class="pad">
            <div class="classify">{{detail.classification}}</div>
            <div class="title">{{detail.title}}</div>

            <div class="detail" >
                <router-link :to="{name:'author',params:{autId : detail.createUserId, autype : 1}}" replace>
                    <img :src="picHead+detail.authorHeadImg" alt="">
                    <div>
                        <div class="name">{{detail.originAuthor}} </div>
                        <div class="date">{{detail.createDate |dateFormate}}</div>
                    </div>
                </router-link>
            </div>
        </div>
        <div class="overview" v-if="detail.summary">{{detail.summary}}<img src="../../assets/image/yinhao.png" alt=""></div>

        <div class="html-content contecntpad" v-html="detail.content">
        </div>
    </div>
</template>

<script>
//    import VueAplayer from 'vue-aplayer'
    import {homeService} from '../../service/homeService'
    const videoPlayer = (resolve) => {require(['../video/video.vue'],resolve)}
    export default {
        components: { 'video-player': videoPlayer},
        data (){
            return{
                isShow:false,
                musicList:[],
                liveNum:null,
                video: {
                    autoplay:false,
                    sources: [],
                    poster: ''
                },
                // remove:false,
                picHead:this.$store.state.picHead,
                audio:null,
                audioPause:null
            }
        },
        props: ['detail'],
        mounted: function(){
            const that = this;
            // console.log(that.detail);
            if(that.detail.type == '2'){
                let obj = {
                    title:'',
                    pic:'',
                    url:that.$store.state.picHead +that.detail.music,
                    author:'',
                    lrc:''
                }
                that.musicList.push(obj);
                that.isShow=true;
            }
            that.video.autoplay = false;
            that.video.poster = that.detail.newposter;
            if(that.detail.type == '4'){
                that.video.sources.push(that.detail.videoLink);
            }
            if(that.detail.type == '3'){
                for(var i=0; i<that.detail.lives.length;i++){
                    homeService.getliveUrl({isMobile:true,watchNo:that.detail.lives[i]}).then(function (res) {
                        for(var j=0;j<res.data.datas.length;j++){
                            let temp = {}
                            temp.src =res.data.datas[j].src;
                            temp.type = res.data.datas[j].type;
                            that.video.sources.push(temp)
                        }
//                        console.log(that.video.sources, '//获取直播链接，后台接口')
//                        console.log(res.data.datas, '//获取直播链接数组')
                    })
                }
            }
//            console.log(that.video.sources,'视频连接')
//            console.log(that.detail,'详情内容')
        },
        updated:function(){
            /*setTimeout(function(){
                this.audio = document.getElementsByClassName('aplayer-icon-play')[0]
            },1000)*/
        },
        beforeDestroy:function(){
//            audioPause.click()
        },
        methods: {
            remove:function(){
                setTimeout(function(){
                    this.audioPause = document.getElementsByClassName('aplayer-icon-pause')[0]
                },500)
            },
            canplay:function(){
                console.log('canplay')
            }
        }
    }
</script>

<style lang="less">
    .aplayer .aplayer-info {
        margin-left: 0 !important;
    }
    .aplayer .aplayer-pic .aplayer-pause svg {
        position: absolute;
        top: 3px;
        left: 3px;
        height: 19px !important;
        width: 19px !important;
    }
    .aplayer .aplayer-pic .aplayer-pause{
        width: 26px !important;
        height: 26px !important;
        right: 15px !important;
    }
    .aplayer-icon.aplayer-icon-mode{
        display:none;
    }
    .aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause {
        left: 7px !important;
        height: 18px !important;
        top:4px !important;
    }
    .aplayer .aplayer-pic .aplayer-play{
        bottom: 19px !important;
        right: 30px !important;
    }
    .aplayer-pic{
        background-image:none !important;
        background-color:transparent!important;
    }
    .aplayer{
        box-shadow:none;
    }
    .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{
        -webkit-transform:scale(1)!important;
        transform:scale(1)!important;
    }
    .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
        vertical-align: middle;
        font-size: .426rem;
    }
    /* 头图 */
    .article-info{
        width:100%;
        /*position:relative;*/
        overflow-y: scroll;
        .keywordsBox{
            padding:0 .4rem;
            // width: 100%;
            margin-top: .533rem;
        }
        .keywords{
            padding:3px 10px;
            background: #fff;
            border-radius: 53px;
            font-size: .32rem;
            color: #bbb;
            display: inline-block;
            margin-right: .4rem;
            border:1px solid #bbb;
        }
        .audio-poster{
            height: 5rem;
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .audio_div{
            margin-top:3.2rem;
            background-color: transparent !important;
            width: 100%;
        }
        .title{
            margin-bottom: .25rem;
            font-size: .588rem;
            color: #333333;
            // letter-spacing: .0488rem;
            text-align: left;
        }
        .image{
            width:100%;
            height:4.98rem;
        }
        .detail{
            img{
                width:.96rem;
                height:.96rem;
                border-radius:50%;
                float: left;
                margin-right: 8px;
                overflow: hidden;
                box-sizing: border-box;
            }
            .name{color:#333}
            .date{color:#999}
            margin-left: 0;
            text-align: left;
            font-size:.32rem;
            color: #666666;
            // letter-spacing: 1px;
        }
        .pad {
            padding: .4rem .4rem;
            .classify{
                background: rgba(32,160,255,.1);
                padding:5px 10px;
                border-radius: 53px;
                font-size:.32rem;
                color: #20A0FF;
                display: inline-block;
                margin: 0 0 .2rem 0;
            }
        }
        // 媒体视频及音频
        .mediaCover{margin-bottom: .6rem;overflow: hidden;position: relative;}
        .mediaCover .audioCover{
            width:100%;
            height:1.6rem;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .audioCoverheight{
            padding:0 !important;
            height: 5rem;
        }

        .aplayer .aplayer-info .aplayer-music{
            margin: 0 0 5px 5px;
        }
        .mediaCover .audioCover .audioplayer{
            width:100%;
            height:100%;
            position: relative;
            background: transparent !important;
            color: #999999  !important;}
        .audioplayer-time.audioplayer-time-current{
            position: absolute;
            border-left:none;
            height: 20px !important;
            left: 1.5rem !important;
            bottom: .1rem !important;
        }
        .audioplayer-playpause{width: 1.6rem!important;}
        .audioplayer-playpause>a{border-left-color:#666 !important; }
        .audioplayer-bar-loaded{background-color: #6699FF!important;}
        .audioplayer-time.audioplayer-time-duration{bottom: .1rem !important;right:.1rem !important;}
        .audioplayer-volume{display: none !important;}
        .mediaCover .audioCover .audioplayer *,.mediaCover .audioCover .audioplayer a,.mediaCover .audioCover .audioplayer-time{font-size:13px !important;}
        .mediaCover .videoCover{width:100%;height:6rem;}
        .mediaCover .videoCover .video-js{width:100%;height:100%;}
        .audioplayer-time{height:20px;}
        .mediaCover .audioplayer-bar{
            width:5.4rem  !important;
            left:2rem  !important;
            height: 2px !important;
            background-color: #ddd  !important;
        }
        .contecntpad{
            padding: 0 .4rem;
        }
        // .html-content{
        //     img{width: 100%;}
        //     ul{list-style:disc inside;
        //         li{ list-style:disc inside;font-size: 18px;line-height: 32px;}
        //     }
        //     ol{list-style:decimal inside;
        //         li{list-style:decimal inside;font-size: 18px;line-height: 32px;}
        //     }
        //     em{ font-style: oblique;font-size: 18px;line-height: 32px;}
        //     u{font-size: 18px;line-height: 32px;}
        //     strong{font-size: 18px;line-height: 32px;}
        //     s{font-size: 18px;line-height: 32px;}
        //     p{font-size: 18px;line-height: 32px;margin-top: 1em;}
        //     h1{margin-top: 1em;font-size: 24px;}
        //     h2{margin-top: 1em;font-size: 22px;}
        //     h3{margin-top: 1em;font-size: 18px;}
        //     h4{margin-top: 1em;font-size: 16px;}
        //     h5{margin-top: 1em;font-size: 14px;}
        //     h6{margin-top: 1em;font-size: 12px;}
        //     span{font-size: 18px;line-height: 32px;}
        //     .pindent{text-indent: 2em; }
        //     blockquote{padding-left: 10px;border-left: 3px solid #dbdbdb;}
        //     pre{
        //         white-space: pre-wrap; /*css-3*/
        //         white-space: -moz-pre-wrap; /*Mozilla,since1999*/
        //         white-space: -pre-wrap; /*Opera4-6*/
        //         white-space: -o-pre-wrap; /*Opera7*/
        //         word-wrap: break-word; /*InternetExplorer5.5+*/
        //     }

        // }
        .overview {
            position: relative;
            margin: 0 .4rem .4rem;
            border: 0;
            text-align: left;
            font-size: 16px !important;
            color: #666666;
            line-height: .6933rem !important;
            font: inherit;
            vertical-align: top;
            position: relative;
            box-shadow: 0 2px 9px 0 rgba(136,136,136,0.21);
            padding: .4rem;
            padding-left: 1.07rem;
            img{
                width: 20px;
                position: absolute;
                top: 13px;
                left: 10px;
            }
        }
        .html-content iframe{
            width: 100%;
            height: 4.8rem;
        }
        .html-content iframe body>div{
            width: 100%;
            height:100%;
        }
        iframe{
            width: 100%;
            height: 4.8rem;
        }
        iframe body>div{
            width: 100%;
            height:100%;
        }
        .video-player-box{
            height: 100% !important;
        }
        .vjs-big-play-button{
            width: 50px !important;
            border-radius: 50% !important;
            top: 40% !important;
            left: 50% !important;
            transform: translate(-50%) !important;
            background-color: rgba(0, 0, 0, .2) !important;
        }
        .vjs-big-play-button .vjs-icon-placeholder{
            font-size: .7rem !important;
        }
        .vjs-poster{
            background-size: cover !important;
        }
        .vjs-control-bar{
            background-color: transparent !important;
            opacity: 0.8 !important;
            background-image: linear-gradient(-180deg, #000000 0%, rgba(0,0,0,0.00) 97%) !important;
        }
        .vjs-icon-play:before{ //继续
            content: "\F101";
        }
        .vjs-icon-replay:before{ //回放
            content: "\F117";
        }
        .vjs-icon-pause:before{ //停止
            content: "\F117";
        }
        .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal{
            display:none;
        }
        .vjs-play-control.vjs-control.vjs-button.vjs-paused.vjs-ended{
            width: 30px !important;
            border-radius: 50% !important;
            -webkit-box-flex: 0;
            -ms-flex: none;
            flex: none;
            border: 1px solid #FFFFFF;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
            text-align: center;
            margin: 8px 5px 8px 9px;
            padding: 0;
            font-size: 3em;
            line-height: 20px;
            height: 30px;
            .vjs-icon-placeholder{
                font-size: .3rem;
            }
            .vjs-progress-control.vjs-control{
                left: 20px !important;
            }
            .vjs-button.vjs-playing,.vjs-button.vjs-paused{
                width: 30px !important;
                border-radius: 50% !important;
                -webkit-box-flex: 0;
                -ms-flex: none;
                flex: none;
                border: 1px solid #FFFFFF;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
                text-align: center;
                margin: 8px 5px 8px 9px;
                padding: 0;
                font-size: 3em;
                line-height: 20px;
                height: 30px;
                .vjs-icon-placeholder{
                    font-size: .3rem;
                }
            }
        }

    }
</style>